﻿import React, {Component} from 'react';
import NewPingtuan from "./newPingtuan";
import axios from 'axios';
import {goods_queryGoodsApp,addGroupActivities,updateGroupActivitiesState,} from '../../utils/api'
import {Button, Card, Space, Table, Row, Col, Input, Select, Tabs, DatePicker, Drawer, Empty,Form,Modal} from "antd";
import locale from "antd/lib/date-picker/locale/zh_CN";
const { Option,  } = Select;
const { TabPane } = Tabs;

const titleStyle={height:'60px',lineHeight:'30px',fontSize:'20px',color: 'rgb(24,144,255)'}



class PingtuanGl extends Component {
    constructor(props) {
        super(props);
        this.state={
            data:props.data, columns:'', data2:'', columns2:'',bulk_state:'',
            /*fasongData:'',*/
            visible: false,
            ModalVisible:false,
            huodongData:''

        }
    }
    componentDidMount(){

    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data,
        });
    }
    showHD(val,text) {
        console.log(val)
        console.log(text.target.innerText)
        this.setState({
            ModalVisible:true
        })
    };
    shangChu(val,text){
        console.log(val)


    }
    xiugaiHD(val,text){
        console.log(val)
        console.log(text)
    }
    shixiaoHD(val,text){
        console.log(val)
        const shixiao={
            bulk_information_id: val.bulk_information_id,
        }
        console.log(shixiao)
        this.shixiao(shixiao)
    }
    shixiao=(val)=>{
        console.log(val)
        axios({
            url:updateGroupActivitiesState,
            method:'post',
            data:val
        }).then(data=>{
            console.log(data)
            this.props.search.bind(this,{bulk_state:''})
        })
    }

    addData(val,text) {
        console.log(val)
        console.log(text.target.innerText)
    }


    dingdanLeiXing=(value)=> {
        console.log(value)
        this.setState({
            bulk_state:value
        })
    }
    callback=(key)=> {
        // console.log(key);
    }
    startTime=(date, dateString)=>{
        this.setState({
            startpaytime:dateString
        })
    }
    lastTime=(date, dateString)=>{
        this.setState({
            lastpaytime:dateString
        })
    }

    bothPintuanHuandong=()=>{
        axios({
            url:goods_queryGoodsApp,
            method:'get',
            params:{}
        }).then(data=>{
            console.log(data.data.data)
            this.setState({
                huodongData:data.data.data
            })
        })
    }
    showDrawer = () => {
        this.bothPintuanHuandong()
        this.setState({
            visible: true,
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    xuanranPintuanTable=(dataSource,columns)=>{
        if (this.props.data!='暂无数据'){
            return <Table rowKey={columns[0].dataIndex} bordered dataSource={dataSource} columns={columns} />
        }else {
            return <Empty
                image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                description='暂无数据'
                locale={locale}/>
        }
    }
    addHuodong=(text)=>{
        text['bulk_state_id']=1
        text['bulk_state']=1
        const shuju={
            bulk_activity_start_time:text.bulk_activity_start_time,
            bulk_activity_end_time:text.bulk_activity_end_time,
            bulk_activity_use_time:text.bulk_activity_use_time,
            bulk_number:text.bulk_number,
            bulk_price:text.bulk_price,
            bulk_state_id:text.bulk_state_id,
            bulk_information_id:text.bulk_information_id,
            goods_id:text.goods_id
        }
        console.log(text)
        axios({
            url:addGroupActivities,
            method: 'post',
            data:shuju
        }).then(data=>{
            console.log(data)
        })
        console.log(this.props)
        this.props.search({bulk_state:''})
        this.onClose()
    }
    handleOk(){
        console.log('正确')
        this.setState({
            ModalVisible:false
        })
    }
    handleCancel(){
        console.log('取消')
        this.setState({
            ModalVisible:false
        })
    }
    render() {
        const {data}=this.state
        const columns = [
            {
                title: '商品ID',
                dataIndex: 'goods_id',
            },
            {
                title: '商品名称',
                dataIndex: 'goods_name',
            },
            {
                title: '原价',
                dataIndex: 'goods_original_price',
            },
            {
                title: '促销价',
                dataIndex: 'goods_promotion',
            },
            {
                title: '拼团价',
                dataIndex: 'bulk_price',
            },
            {
                title: '活动开始时间',
                dataIndex: 'bulk_activity_start_time',
            },
            {
                title: '活动结束时间',
                dataIndex: 'bulk_activity_end_time',
            },
            {
                title: '成团有效时间',
                dataIndex: 'bulk_activity_use_time',
            },
            {
                title: '成团人数',
                dataIndex: 'bulk_number',
            },
            {
                title: '活动状态',
                dataIndex: 'activity_type_name',
            },
            {
                title: '操作',
                sorter: true,
                render: (text, record) =>{
                    if(text.activity_type_name==='已结束'){
                        return (  //塞入内容
                            <Space size="middle">
                                {/*<Button onClick={this.showHD.bind(this,text)} type="primary">查看</Button>*/}
                                <Button onClick={this.shangChu.bind(this,text)}  type="primary" danger>删除</Button>
                            </Space>
                        )
                    }
                    else if(text.activity_type_name==='进行中'){
                        return (  //塞入内容
                            <Space size="middle">
                                {/*<Button onClick={this.showHD.bind(this,text)} type="primary">查看</Button>*/}
                                <Button onClick={this.shixiaoHD.bind(this,text)}  type="primary" danger>使失效</Button>
                            </Space>
                        )
                    }
                    else if(text.activity_type_name==='未开始'){
                        return (  //塞入内容
                            <Space size="middle">
                                {/*<Button onClick={this.xiugaiHD.bind(this,text)} type="primary">编辑</Button>*/}
                                <Button onClick={this.shangChu.bind(this,text)}  type="primary" danger>删除</Button>
                            </Space>
                        )
                    }
                }

            },
        ];
        // console.log(data)
        return (
            <div>
                <Card headStyle={titleStyle} title="拼团管理列表">
                    <Row gutter={[16, 16]}>
                        <Col span={7}>
                            <Row align="middle" gutter={[16, 16]}>
                                <Col span={5}>活动状态：</Col>
                                <Col span={12}>
                                    <Select style={{width:'100%'}} defaultValue="" onChange={this.dingdanLeiXing}>
                                        <Option value=""></Option>
                                        <Option value="1">未开始</Option>
                                        <Option value="2">进行中</Option>
                                        <Option value="3">已结束</Option>
                                    </Select>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={7}>
                            <Row align="middle">
                                <Space size='large'>
                                    <Button type="primary" onClick={this.props.search.bind(this,this.state)}>查询</Button>
                                    <Button type="primary" onClick={this.showDrawer}>新建拼团活动</Button>
                                </Space>
                            </Row>
                        </Col>
                    </Row>
                </Card>
                <Card>
                    {this.xuanranPintuanTable(data,columns)}
                </Card>

                <Drawer
                    title="新增拼团活动"
                    width={720}
                    maskClosable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    destroyOnClose={true}
                >
                    <NewPingtuan huodongData={this.state.huodongData} addHuodong={this.addHuodong} onClose={this.onClose}/>
                </Drawer>

                {/*<Modal
                    title="Basic Modal"
                    visible={this.state.ModalVisible}
                    onOk={this.handleOk.bind(this)}
                    onCancel={this.handleCancel.bind(this)}
                    maskClosable={false}
                >

                </Modal>*/}
            </div>
        );
    }
}

export default PingtuanGl;